<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
<div>当自定组件的props为json对象而不是字符串时，可能对参数有一定要求，这时候需要进行验证</div>
<div id="app">
    <ul>
        <c-item v-for="item in cItem" v-bind:time="item">
            <div v-bind:propF = "item"></div>
        </c-item>
    </ul>
</div>

<script>
    Vue.component('c-item', {
        props: {
            // 基础类型检测 （`null` 意思是任何类型都可以）
            propA: Number,
            // 多种类型
            propB: [String, Number],
            // 必传且是字符串
            propC: {
                type: String,
                required: true
            },
            // 数字，有默认值
            propD: {
                type: Number,
                default: 100
            },
            // 数组／对象的默认值应当由一个工厂函数返回
            propE: {
                type: Object,
                default: function () {
                    return { message: 'hello' }
                }
            },
            // 自定义验证函数
            propF: {
                validator: function (value) {
                    return value > 10
                }
            },
            time:Number
        },
        template:"<li>{{time}}</li>"

    })

    var v = new Vue({
        el:"#app",
        data:{
            //父组件的值，最终传到子组件tao之中去。当子组件在另一个文件定义时，是有用的。但实际上生成的html
            // 最后是在同一个文件之中的。看起来像是进行了组件之间的通讯。嗯。只是个传值

            cItem:[1,2,3,4,5,6,11,12,13,14,15,16]
        }

    })
</script>
</body>
</html>